<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        :rules="rules"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="客户编号" prop="customerSerialnumber">
          <el-input v-model="queryForm.customerSerialnumber" style="width: 100px;" />
        </el-form-item>

        <el-form-item label="用能类型" prop="customerType">
          <el-select v-model="queryForm.customerType" style="width: 100px;">
            <el-option label="居民 使用" value="0" />
            <el-option label="商业 使用" value="1" />
            <el-option label="工业 使用" value="2" />
            <el-option label="农业 使用" value="3" />
            <el-option label="教育 使用" value="4" />
            <el-option label="医疗 使用" value="5" />
            <el-option label="政府及事业单位 使用" value="6" />
            <el-option label="其他 使用" value="7" />
          </el-select>
        </el-form-item>

        <el-form-item label="统计周期" prop="cycle">
          <el-select v-model="queryForm.cycle" style="width: 100px;" @change="onCycleChange">
            <el-option label="月" value="1" />
            <el-option label="季" value="2" />
            <el-option label="年" value="3" />
          </el-select>
        </el-form-item>

        <el-form-item :label="'选择'+getCycleName()" prop="date">
          <el-date-picker
            v-model="queryForm.date"
            style="width: 110px;"
            type="month"
            value-format="yyyy-MM"
            v-if="queryForm.cycle=='1'"
          />
          <el-select v-model="queryForm.date" style="width: 110px;" v-if="queryForm.cycle=='2'">
            <el-option label="第一季度" value="0" />
            <el-option label="第二季度" value="1" />
            <el-option label="第三季度" value="2" />
            <el-option label="第四季度" value="3" />
          </el-select>
          <el-date-picker
            v-model="queryForm.date"
            style="width: 110px;"
            type="year"
            value-format="yyyy"
            v-if="queryForm.cycle=='3'"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
          <el-button type="primary" @click="viewChart">
            <d2-icon name="bar-chart" />查看图表
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="onPageChange"
        ></d2-crud>
      </template>
    </split-pane>
    <el-dialog :visible.sync="dialogVisible">
      <ve-histogram :data="chartData" :settings="chartSetting"></ve-histogram>
    </el-dialog>
  </d2-container>
</template>

<script>
import MyAreaTree from "@/components/my-area-tree";
import dayjs from "dayjs";
import VeHistogram from "v-charts/lib/histogram";

export default {
  name: "huanbi",
  components: { MyAreaTree, VeHistogram },
  data() {
    return {
      queryForm: {
        areaId: "1",
        customerName: "",
        customerSerialnumber: "",
        customerType: "0",
        cycle: "1",
        date: dayjs().format("YYYY-MM")
      },
      rules: {
        cycle: [{ required: true, message: "必填", trigger: "blur" }],
        date: [{ required: true, message: "必填", trigger: "blur" }]
      },
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      columns: [
        {
          title: "序号",
          key: "serialNum",
          sort: true
        },
        {
          title: "区域名称",
          key: "areaName",
          sort: true
        },
        {
          title: "客户名称",
          key: "customerName",
          sort: true
        },
        {
          title: "客户编号",
          key: "customerSerialnumber",
          sort: true
        },
        {
          title: "时间",
          key: "date",
          sort: true
        },
        {
          title: "用量",
          key: "dosage",
          sort: false
        },
        {
          title: "环比日期",
          key: "lastYearDate",
          sort: true
        },
        {
          title: "环比用量",
          key: "lastYearDosage",
          sort: false
        }
      ],
      data: [],
      dialogVisible: false,
      chartData: null,
      chartSetting: {
        labelMap: {
          datetime: "时间",
          value: "用量"
        }
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    getCycleName() {
      switch (this.queryForm.cycle) {
        case "1":
          return "月";
        case "2":
          return "季";
        case "3":
          return "年";
        default:
          return "日期";
      }
    },
    onAreaChange(data, node) {
      console.log(data, node);
      this.queryForm.areaId = data.id;
      this.fetchData();
    },
    onCycleChange() {
      this.queryForm.date = "";
    },
    handleFormSubmit() {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          this.fetchData();
        } else {
          return false;
        }
      });
    },
    fetchData() {
      this.loading = true;
      this.$api
        .admin_loopRatio_getLoopRatioStatisticsPageVO({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          ...this.queryForm
        })
        .then(res => {
          this.data = res.data;
          this.pagination.total = res.total;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onPageChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchData();
    },
    viewChart() {
      this.dialogVisible = true;
      this.$api
        .admin_loopRatio_getLoopRatioStatisticsChartVO({ ...this.queryForm })
        .then(res => {
          this.chartData = {
            columns: ["datetime", "value"],
            rows: res
          };
        });
    }
  }
};
</script>
